<template>
  <div class="app-container">

    <el-tabs v-model="activeNameTabs" @tab-click="handleClickTabs">
      <el-tab-pane label="项目信息" name="first">
        <!-- 引入 basicInfo 组件 -->
        <basic-info :projectId="projectId" />
      </el-tab-pane>
      <el-tab-pane label="产品需求" name="second">
        <!-- 引入 ScmProjectProductsTable 组件 -->
        <ScmProjectProductsTable v-if="activeNameTabs === 'second'" :projectId="projectId" />
      </el-tab-pane>
      <el-tab-pane label="客户询价" name="third">
        <scm-inquiries-in v-if="activeNameTabs === 'third'" :projectId="projectId" :project-code="form.projectCode"/>
      </el-tab-pane>
      <el-tab-pane label="RD询价" name="fourth">
        <scm-inquiries-out v-if="activeNameTabs === 'fourth'" :projectId="projectId" :project-code="form.projectCode"/>
      </el-tab-pane>
      <el-tab-pane label="供应商报价" name="fifth">
        <scm-supplier-quotes v-if="activeNameTabs === 'fifth'" :projectId="projectId" :project-code="form.projectCode"/>
      </el-tab-pane>
      <el-tab-pane label="项目研讨" name="sixth">
        <scm-estimate-quotes v-if="activeNameTabs === 'sixth'" :projectId="projectId" :project-code="form.projectCode"/>
<!--        <keep-alive>-->
<!--          <component :is="scmEstimateQuotes" v-if="activeNameTabs === 'sixth'" :projectId="projectId" />-->
<!--        </keep-alive>-->
      </el-tab-pane>
      <el-tab-pane label="RD报价" name="seventh">
        <scm-customer-quotes v-if="activeNameTabs === 'seventh'" :projectId="projectId" :project-code="form.projectCode"/>
      </el-tab-pane>
      <el-tab-pane label="客户订单" name="eighth">
        <scm-customer-orders :projectId="projectId" ref="scmCustomerOrdersRef" v-model="activeNameTabs" />
      </el-tab-pane>
      <el-tab-pane label="供应商订单" name="ninth">
        <scm-supplier-orders :projectId="projectId" ref="scmSupplierOrdersRef" v-model="activeNameTabs" />
<!--        <scm-supplier-orders v-if="activeNameTabs === 'ninth'" :projectId="projectId" />-->
      </el-tab-pane>
      <el-tab-pane label="进出货" name="tenth">
        <scm-inventory-summary v-if="activeNameTabs === 'tenth'" :projectId="projectId" />
      </el-tab-pane>
      <el-tab-pane label="售后反馈" name="eleventh">
        <scm-defect-info v-if="activeNameTabs === 'eleventh'" :projectId="projectId" :project-code="form.projectCode"/>
      </el-tab-pane>
      <el-tab-pane label="工厂对账" name="twelfth">
        <scm-supplier-statement v-if="activeNameTabs === 'twelfth'" :projectId="projectId" />
      </el-tab-pane>
      <el-tab-pane label="客户对账" name="thirteen">
        <scm-customer-statement v-if="activeNameTabs === 'thirteen'" :projectId="projectId" />
      </el-tab-pane>
    </el-tabs>


  </div>


</template>

<script setup >

import BasicInfo from "./basicInfo.vue";
import ScmProjectProductsTable from "./ScmProjectProductsTable.vue"; // 新增引入
import scmInquiriesIn from '@/views/scm/scmProjectProducts/scmInquiriesIn.vue'
import scmInquiriesOut from '@/views/scm/scmProjectProducts/scmInquiriesOut.vue'
import scmEstimateQuotes from '@/views/scm/scmProjectProducts/scmEstimateQuotes.vue'
import scmCustomerQuotes from '@/views/scm/scmProjectProducts/scmCustomerQuotes.vue'
import scmSupplierQuotes from '@/views/scm/scmProjectProducts/scmSupplierQuotes.vue'
import scmCustomerOrders from '@/views/scm/scmProjectProducts/scmCustomerOrders.vue'
import scmSupplierOrders from '@/views/scm/scmProjectProducts/scmSupplierOrders.vue'
import scmDefectInfo from '@/views/scm/scmProjectProducts/scmDefectInfo.vue'
import ScmInventorySummary from "@/views/scm/scmProjectProducts/scmInventorySummary.vue";
import ScmSupplierStatement from "@/views/scm/scmProjectProducts/scmSupplierStatement.vue";
import ScmCustomerStatement from "@/views/scm/scmProjectProducts/scmCustomerStatement.vue";
import {reactive, ref, toRefs} from "vue";
import {addProjects, getProjects, updateProjects} from "@/api/scm/projects.js";

const { proxy } = getCurrentInstance();
const { scm_demand_type, scm_project_customer_status, scm_product_status, scm_project_supplier_status, scm_purchase_category } = proxy.useDict(
  "scm_demand_type",
  "scm_project_customer_status",
  "scm_product_status",
  "scm_project_supplier_status",
  "scm_purchase_category"
);

const route = useRoute();
const activeNameTabs = ref("first");
// const projectId = ref(route.query.projectId ? route.query.projectId : 0);
const projectId = computed(() => route.query.projectId || 0);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    projectId: null,
    productId: null,
    projectProductStatus: null,
    customerStatus: null,
    supplierStatus: null,
  },

});

const { queryParams, form } = toRefs(data);

// 定义 ref
const scmCustomerOrdersRef = ref();

/** 点击标签 */
function handleClickTabs(tab, event) {
  // console.log(tab, event);
  if (tab.props.name === 'eighth') { // 对应 "客户订单" 标签
    console.log(scmCustomerOrdersRef.value);
    if (scmCustomerOrdersRef.value && typeof scmCustomerOrdersRef.value.getList === 'function') {
      scmCustomerOrdersRef.value.getList(); // 调用子组件 getList 方法
    } else {
      console.warn('子组件未正确加载或方法不存在');
    }
  }
}





// 表单重置
function reset() {
  form.value = {
    projectId: null,
    projectCode: null,
    projectName: null,
    customerId: null,
    customerTitle: null,
    customerContactId: null,
    customerContactName: null,
    ownerUserId: null,
    ownerUserName: null,
    myCurrency: null,
    customerCurrency: null,
    supplierCurrency: null,
    customerCurrencyRate: null,
    supplierCurrencyRate: null,
    startDate: null,
    endDate: null,
    projectStatus: null,
    purchaseCategory: null,
    demandType: null,
    budget: null,
    remark: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
}

/** 修改按钮操作 */
function handleInquiry() {
  reset();
  const _projectId = projectId.value
  if (_projectId == null || _projectId === '' || _projectId === 0 || _projectId === "0" )
    return;
  getProjects(_projectId).then(response => {
    form.value = response.data;
  });
}

handleInquiry();
</script>
